<template>
	<div class="player">
		<v-video-player class="vjs-custom-skin"
					 ref="videoPlayer"
					 :options="playerOptions"
					 :playsinline="true"

					 @play="onPlayerPlay($event)"
					 @pause="onPlayerPause($event)"
					 @ended="onPlayerEnded($event)"
					 @loadeddata="onPlayerLoadeddata($event)"
					 @waiting="onPlayerWaiting($event)"
					 @playing="onPlayerPlaying($event)"
					 @timeupdate="onPlayerTimeupdate($event)"
					 @canplay="onPlayerCanplay($event)"
					 @canplaythrough="onPlayerCanplaythrough($event)"
					 @ready="playerReadied"
					 @statechanged="playerStateChanged($event)">
		</v-video-player>
	</div>
</template>

<script>
import { videoPlayer as vVideoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
	props: {
		url: {
			type: String,
			required: true
		},
		onEnd: {
		}
	},
	components: {
		vVideoPlayer
	},	
	data() {
	  return {
		playerOptions: {
		  height: 542.5,
		  language: 'zh-CN',
		  playbackRates: [0.7, 1.0, 1.5, 2.0],
		  aspectRatio: '16:9',
		  sources: [{
			type: "video/mp4",
			src: this.url
		  }]
		}
	  }
	},
	mounted() {
	  console.log('this is current player instance object', this.player)
	},
	computed: {
	  player() {
		return this.$refs.videoPlayer.player
	  }
	},
	methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
		  document.exitFullscreen()
		  if (this.onEnd)
			this.onEnd(true)
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // seek to 10s
        console.log('example player 1 readied', player)
        // player.currentTime(10)
        // console.log('example 01: the player is readied', player)
      },
	  playBack() {
		  this.player.play()
	  }
	}
}	
</script>

<style>
.player {
	width: 100%;
}
</style>
